<template>
	<view class="store-wrapper" :style="[style]">
		<e-loading-page :loading="loading">
			<template #icon>
				<loader></loader>
			</template>
		</e-loading-page>
		<store-layout :storeId="storeId" :componentsList="componentsList" :onShow="isShow" @pageBackgroundImageChange="setPageBackgroundImage" />
	</view>
</template>

<script lang="ts">
import { ref, reactive, provide, defineComponent } from 'vue';
import storeLayoutMixIn from '@/common/mixin/storeLayoutMixIn';
import { getStoreHomeLayout } from '@/common/request/api';
import { useTabbar } from '../utils/customTabbar';
import { homePageContextKey } from '@/token';

export default defineComponent({
	mixins: [storeLayoutMixIn],
	props: {
		index: {
			type: String,
			required: true
		}
	},
	emit: ['endRefresh'],
	setup(props, ctx) {
		const loading = ref(false);
		const storeId = ref(uni.getStorageSync('storeId') || '');

		const { onShow, onHide } = useTabbar(props.index);

		const getHomeData = async () => {
			loading.value = true;
			try {
				const res = await getStoreHomeLayout(storeId.value);
				setPageOption(res.data);
			} catch {}
			loading.value = false;
		};

		getHomeData();
		const isShow = ref(false);
		onShow(() => {
			isShow.value = true;
			ctx.setMpShare(ctx.mpShare);
		});
		onHide(() => {
			isShow.value = false;
		});

		const handlePullDownRefresh = () => {
			getHomeData().finally(() => {
				ctx.emit('endRefresh');
			});
		};
		const handleReachBottom = () => {
			uni.$emit('onHomePageReachBottom');
		};
		onPullDownRefresh(() => {
			handlePullDownRefresh();
		});
		onReachBottom(() => {
			handleReachBottom();
		});

		provide(
			homePageContextKey,
			reactive({
				contextId: 'home'
			})
		);

		return {
			loading,
			scrollViewRef
		};
	}
});
</script>

<style lang="scss" scoped></style>
